<template>
  <div style="text-align: left;">
    <!-- 搜索框 -->
    <van-search
      show-action
      v-model="searchTxt"
      @input="onInput"
      @search="onSearch"
      @cancel="onCancel"
      @clear="onClear"
      placeholder="用户/帖子/版块"
    >
    </van-search>
    <!-- 搜索建议 -->
    <div v-show="showSugest" class="suggest">
      <van-collapse v-model="activeNames" :border="false">
        <van-collapse-item  name="history">
          <div slot="title" class="history-title">搜索历史</div>
          <div class="history-wrapper" v-for="(item, idx) in historyList" :key="idx">
            <div class="history-item" @click="onChoseHistory(idx)">
              {{item.text}}
            </div>
            <van-icon name="cross" size="16px" @click="onDelHistory(idx)"></van-icon>
          </div>
        </van-collapse-item>
        <van-collapse-item  name="hot">
          <div slot="title" class="history-title">近期热点</div>
          <van-grid :border="false" gutter="10px" :column-num="2">
            <van-grid-item v-for="(item, idx) in hotList" :key="idx">
              <div class="hot-item" @click="onChoseHot(idx)">
                {{item.text}}
              </div>
            </van-grid-item>
          </van-grid>
        </van-collapse-item>
      </van-collapse>
    </div>
    <!-- 搜索结果 -->
    <div v-show="!showSugest">
      <!-- 用户 -->
      <div>
        <div class="result-title">与'{{searchTxt}}'相关的用户</div>
        <div class="divider"></div>
        <div class="user-wrapper" v-for="(item, idx) in this.userList" :key="idx" >
          <Author style="margin-bottom: 10px" :name="item.nick || '作者昵称'" :time="item.nick" :img="item.avatar"></Author>
          <van-button @click="onFollow(idx)" size="small" :color="item.isFollow ? 'green' : '#FF8800'" style="font-size: 14px">{{item.isFollow?'发消息':'关注'}}</van-button>
        </div>
      </div>
      <div style="height: 20px;background-color: WhiteSmoke;width: 100%"></div>
      <!-- 帖子 -->
      <div style="padding-top: 10px">
        <div class="result-title">与'{{searchTxt}}'相关的帖子</div>
        <div class="divider2"></div>
        <ArticleList :articleList="articleList"></ArticleList>
      </div>
    </div>
  </div>
</template>

<script>
import Author from '@/components/Author.vue'
import ArticleList from '@/views/article/ArticleList.vue'
export default {
  name: 'Search',
  components: {
    Author: Author,
    ArticleList: ArticleList
  },
  data () {
    return {
      searchTxt: '',
      activeNames: ['history', 'hot'],
      showSugest: true,
      historyList: [
        { text: '王思聪', icon: '' },
        { text: '老挝房产', icon: '' },
        { text: '老挝海关何时开放', icon: '' },
        { text: '罗志祥', icon: '' },
        { text: '天籁之战第二季', icon: '' },
        { text: '机票', icon: '' }
      ],
      hotList: [
        { text: '王思聪', icon: '' },
        { text: '老挝房产', icon: '' },
        { text: '老挝海关何时开放', icon: '' },
        { text: '罗志祥', icon: '' },
        { text: '天籁之战第二季', icon: '' },
        { text: '机票', icon: '' }
      ],
      userList: [], // 用户列表
      articleList: [] // 文章列表
    }
  },
  methods: {
    // 选择历史记录
    onChoseHistory (idx) {
      this.searchTxt = this.historyList[idx].text
      this.onSearch()
    },
    // 选择热点
    onChoseHot (idx) {
      this.searchTxt = this.hotList[idx].text
      this.onSearch()
    },
    // input
    onInput (val) {
      if (val === '') {
        this.userList = []
        this.articleList = []
        this.showSugest = true
      } else {
        this.showSugest = false
      }
    },
    // 清除搜索内容
    onClear () {
      this.userList = []
      this.articleList = []
      this.showSugest = true
    },
    // 执行搜索
    onSearch () {
      this.showSugest = false
      this.$api.searchReq({ type: 0, text: this.searchTxt })
        .then(
          (resp) => {
            // 测试~~~~
            for (let i = 0; i < resp.userList.length; i++) {
              resp.userList[i].isFollow = false
            }
            this.userList = resp.userList
            this.articleList = resp.articleList
          }
        )
        .catch(
          (err) => {
            console.log('onSearch failed！', err)
          }
        )
    },
    // 删除历史记录
    onDelHistory (idx) {
      this.historyList.splice(idx, 1)
    },
    // 取消搜索并返回
    onCancel () {
      this.showSugest = true
      this.userList = []
      this.articleList = []
      this.$router.back()
    },
    // 关注
    onFollow (idx) {
      let reqData = { id: this.userList[idx].id, flag: 1 }
      this.$api.followReq(reqData)
        .then((resp) => {
          if (resp.errMsg === 'OK') {
            console.log('this.userList[idx].isFollow', this.userList[idx].isFollow, this.userList[idx].nick)
            this.userList[idx].isFollow = true
            console.log('this.userList[idx].isFollow', this.userList[idx].isFollow, this.userList[idx].nick)
            this.$toast({ message: '关注成功', duration: 1000 })
          }
        })
    }
  }
}
</script>

<style scss>
  .history-title{
    font-size: 14px;
    color: grey;
  }
  .history-wrapper{
    display: flex;
    justify-content: space-between;
  }
  .history-item{
    color: black;
    margin-bottom: 5px;
    font-size: 16px;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hot-item{
    color: black;
    margin-bottom: 5px;
    font-size: 16px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .suggest .van-grid{
    padding-left: 0px!important;
  }
  .suggest .van-grid-item{
    margin-top: 0px!important;
  }
  .suggest .van-grid-item__content--center{
    align-items: flex-start!important;
  }
  .suggest .van-grid-item__content {
    padding: 0px 0px!important;
  }

  .result-title {
    padding-left: 20px;
    font-size: 14px;
    color: grey;
  }
  .divider {
    height: 1px;
    background-color: WhiteSmoke;
    width: 100%;
    margin: 10px 0px;
  }
  .divider2 {
    height: 1px;
    background-color: WhiteSmoke;
    width: 100%;
    margin: 10px 5px 0 0;
  }
  .user-wrapper{
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
  }
</style>
